@model Senparc.Core.Models.VD.Common_AreaListVD
@{
    var prefixSplitMarkForID = string.IsNullOrEmpty(Model.Prefixes) ? "" : ".";
}

<div class="input-group">
    <div class="input-group-btn">
        @Html.DropDownList(Model.Prefixes + prefixSplitMarkForID + "Province", new SelectList(Model.Provinces, "ProvinceName", "ProvinceName", Model.UserProvince), new { @class = "b input-sm mr" })
        @Html.DropDownList(Model.Prefixes + prefixSplitMarkForID + "City", new SelectList(Model.Cities, "CityName", "CityName", Model.UserCity), new { @class = "b input-sm mr" })
        @if (!Model.HideDistrict)
        {
            @Html.DropDownList(Model.Prefixes + prefixSplitMarkForID + "District", new SelectList(Model.Districts, "DistrictName", "DistrictName", Model.UserDistrict), new { @class = "b input-sm mr" })
        }
    </div>
</div>
<div id="AreaLoading" class="loading3 hide">
</div>

<script type="text/javascript">
    var idPrefixex = "@(Model.Prefixes.IsNullOrEmpty() ? "" : Model.Prefixes + "_")";

    var topProvince = @Html.Raw(Model.TopProvince.ToJson());

    var topCity = @Html.Raw(Model.TopCity.ToJson());

    var topDistrict = @Html.Raw(Model.TopDistrict.ToJson());

    //设置“地区”首选项
    function SetTopDistrict() {
        if (topDistrict.ID != -1) {
            var districtList = $("#" + idPrefixex + "District");
            var item = $("<option>");
            item.val(topDistrict.DistrictName);
            item.html(topDistrict.DistrictName);
            districtList.prepend(item);
        }
    }
   window.onload = function () {
        //增加首选项
        SetTopProvince();
        SetTopCity();
        @(Model.HideDistrict ? "" : "SetTopDistrict();")

        document.getElementById(idPrefixex + "Province").onchange = function () {
            console.log($(this).val());
            AreaChange('province', $(this).val());
        };//);
        document.getElementById(idPrefixex + "City").onchange = function () {
            AreaChange('city', $(this).val());
        };//);
    };//);
    function ShowAreaLoding()
    {
        var areaLoading = $("#AreaLoading");
            areaLoading.css("top",(document.documentElement.scrollTop + window.screen.availHeight/2 - 100) + "px");
            areaLoading.css("left",(document.body.offsetWidth/2 - 50) + "px");
        areaLoading.show();
    }

    function AreaChange(area /*变化区域*/ ,name)
    {
        //alert("AreaChange");
        //如果名称为""(空项)，则请清空下级菜单。不从服务器读取
        if(name == "")
        {
            if(area == "province")
            {
                $("#"+idPrefixex+"City").empty();
                SetTopCity();
            }

            $("#"+idPrefixex+"District").empty();
            @(Model.HideDistrict ? "" : "SetTopDistrict();")
            return;
        }

        var data =  "area=" + area + "&name=" + name + "";
        $.ajax({
            type: "POST",
            dataType:"json",
            data:data,
            url: '@Url.Action("GetAreaJsonData", "Area", new { area = "" })',
            error: function () { baseAlert("warning","数据载入出错！"); },
            beforeSend:function(){
                ShowAreaLoding();
            },
            success: function(msg){
                if (area == "province") {
                    var cityList = $("#" + idPrefixex + "City");
                    cityList.empty();
                    SetTopCity();//添加首项
                    $.each(msg, function (i, item) {
                        cityList.append("<option value=" + item.cityName + ">" + item.cityName + "</option>");
                    });

                    $("#" + idPrefixex + "District").empty();//清除下级

                    AreaChange("city", $("#" + idPrefixex + "City").val());
                }
                else if (area == "city") {
                    var hideDistrict = "@Model.HideDistrict" === "True" ? true : false;

                    if (!hideDistrict) {
                        var districtList = $("#" + idPrefixex + "District");
                        districtList.empty();
                        SetTopDistrict();//添加首项
                        $.each(msg, function (i, item) {
                            districtList.append("<option value=" + item.districtName + ">" + item.districtName + "</option>");
                        });
                    }
                }
                $("#AreaLoading").hide();
            }
        });
    }

    //设置“省份”首选项
    function SetTopProvince()
    {
        var provinceList = $("#"+idPrefixex+"Province");
        var showProvinceAllButton = @(Model.ShowProvinceAllButton?"true":"false");
        if(topProvince.ID != -1)
        {
            var item = $("<option>");
            item.val(topProvince.ProvinceName);
            item.html(topProvince.ProvinceName);

            provinceList.prepend(item);
        }
        if(showProvinceAllButton)
        {
            var item = $("<option>");
            item.val("");
            item.html("不限");
            provinceList.prepend(item);
            if (topProvince.ID == -1) {
                item.attr("selected",true);
            }
        }
    }

    //设置“城市”首选项
    function SetTopCity()
    {
        var cityList = $("#"+idPrefixex+"City");
        var showCityAllButton = @(Model.ShowCityAllButton?"true":"false");
        if(topCity.ID != -1)
        {
            var item = $("<option>");
            item.val(topCity.CityName);
            item.html(topCity.CityName);

            cityList.prepend(item);
        }
        if (showCityAllButton)
        {
            var item = $("<option>");
            item.val("");
            item.html("不限");
            cityList.prepend(item);

            if (topCity.ID == -1) {
                item.attr("selected",true);
            }
        }
    }
</script>
@if (!Model.HideDistrict)
{
    <script type="text/javascript">
        //设置“地区”首选项
        function SetTopDistrict() {
            if (topDistrict.ID != -1) {
                var districtList = $("#" + idPrefixex + "District");
                var item = $("<option>");
                item.val(topDistrict.DistrictName);
                item.html(topDistrict.DistrictName);
                districtList.prepend(item);
            }
        }
    </script>
}
